<template>

    <!-- 根据鲜花类型画的饼状图 (南丁格尔玫瑰图)-->
    <div id="rose" style="width: 700px; height: 400px;"></div>

</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      chart: null,
      // chartData: {
      //   // 这里是要绘制的饼图数据
      // },
      data:[]
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 南丁格尔玫瑰图
    rose() {
      // 创建echarts实例
      var dom = document.getElementById("rose");
      var myChart = this.$echarts.init(dom);
     var roseOption = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,  //是否显示提示框组件。
          // feature: {
          //   mark: { show: true },
          //   // dataView: { show: true, readOnly: true },  //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
          //   // restore: { show: true }, //是否显示该工具
          //   // saveAsImage: { show: true },  保存为图片
          // },
        },
        series: [
          {
            name: "鲜花类型数据分析图",
            type: "pie", //type设置为饼图
            // 饼图的半径。可以为如下类型：
            // number：直接指定外半径值。
            // string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
            // Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
            radius: [10, 120],
            // center ：饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
            center: ["50%", "50%"],
            // roseType : 是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            //  'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
            //  'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: this.data,
          },
        ],
      };
      //调用 setOption 将option 输入echarts,然后echarts渲染图表
      roseOption && myChart.setOption(roseOption)
    },
    
    line(){

    }
  },
  created() {},
  async mounted() {
    await this.request.get("/type").then(res => {
        console.log(res)
        var data = []  
        // this.tableData = res.data.data.records
        res.data.data.forEach(element => {
          console.log(element)
          data.push({value:element.num,name:element.tname})
        });
       this.data = data

      })
      this.rose()
  },
};
</script>
<style scoped>
</style>